<template>
  <div id="app">
    <jh-virtual-table :data='list' stripe border>
      <jh-virtual-table-column label='日期' prop="date" :sortable="true" />
      <jh-virtual-table-column label='姓名' prop="name" />
      <jh-virtual-table-column label='地址' prop="address">
        <template slot-scope="scope">
          <button @click="testClick(scope)">{{scope.row.address}}</button>
        </template>
      </jh-virtual-table-column>
    </jh-virtual-table>
    <h1>123456789</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    const list = [];
    for (let i = 1; i <= 10 * 10; i++) {
      list.push({
        id: i,
        date: Mock.Random.date(),
        name: Mock.Random.cname(),
        address: `${Mock.Random.province()}-${Mock.Random.city()}-${Mock.Random.county()}`,
      });
    }
    this.list = list;
  },
  methods: {
    testClick(scope) {
      alert(scope.row.name);
    },
  },
};
</script>

<style lang="less" scoped>
#app {
  margin: 10px;
  height: 800px;
  &::-webkit-scrollbar {
    width: 6px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background: rgba(144, 146, 152, 0.5);
  }
  &::-webkit-scrollbar-track {
    border-radius: 6px;
    background: transparent;
  }
  .options {
    margin-bottom: 10px;
  }
  .btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
  }
  .btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
    &:hover {
      color: #333;
      background-color: #e6e6e6;
      border-color: #adadad;
    }
  }
}
</style>
